<template>
  <!-- 上方菜单 -->
  <div class="menus">
    <div>
      <el-form :inline="true">
        <el-form-item>
          <ElInput v-model="queryInfo.fileinfo" placeholder="文件描述模糊查询"></ElInput>
        </el-form-item>
        <el-form-item>
          <ElInput v-model="queryInfo.filename" placeholder="文件名称模糊查询"></ElInput>
        </el-form-item>
        <el-form-item>
          <ElSelect v-model="queryInfo.contentType" placeholder="文件类型">
            <ElOption v-for="d in types" :key="d.type" :value="d.type" :label="d.text"></ElOption>
          </ElSelect>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button-group>
        <el-button type="danger" @click="requery"
          ><el-icon><Refresh /></el-icon>重置</el-button
        >
        <el-button type="primary" @click="query"
          ><el-icon><Search /></el-icon>查询</el-button
        >
      </el-button-group>
    </div>
    <div>
      <el-button type="success" @click="uploadVisible = true"
        ><el-icon><UploadFilled /></el-icon>上传</el-button
      >
    </div>
  </div>
  <!-- 文件列表 -->
  <div class="info">
    <el-table :data="list" stripe>
      <el-table-column prop="fileinfo" label="文件描述信息" />
      <el-table-column prop="filename" label="原始文件名" />
      <el-table-column prop="contentType" label="文件类型" />
      <el-table-column label="文件大小">
        <template #default="scope">
          {{ FileTools.formatFileSize(scope.row.filesize) }}
        </template>
      </el-table-column>
      <el-table-column label="信息最后修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row)" size="small">删除</el-button>
          <el-button type="primary" @click="showPreview(scope.row)" size="small">预览</el-button>
          <el-button type="success" @click="copyurl(scope.row)" size="small">复制文件地址</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>

  <!--文件预览 -->
  <el-dialog v-model="previewVisible" title="文件预览" @closed="removePreview">
    <FilePreviewComp :fileinfo="preview"></FilePreviewComp>
  </el-dialog>

  <!-- 文件上传 -->
  <el-dialog v-model="uploadVisible" title="文件上传" @closed="requery">
    <el-form>
      <el-form-item>
        <ElButton type="primary" @click="browseFile">浏览文件...</ElButton>
        <span v-if="selecetFile.file">{{ selecetFile.name }}</span>
      </el-form-item>
      <el-form-item>
        <ElInput v-model="fileinfo" placeholder="文件描述信息"></ElInput>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="reset">
          <el-icon><RefreshLeft /></el-icon>重置
        </el-button>
        <el-button type="primary" :disabled="!selecetFile.file" @click="upload">
          <el-icon><UploadFilled /></el-icon>上传
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <BackToHome />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElTable, ElMessageBox, ElButton, ElButtonGroup, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage, ElDialog } from 'element-plus'
import { TbFile } from '../../ts/types/TbFile'
import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { FileTools } from '../../ts/FileTools'
import { ApiService } from '../../ts/ApiService'
import PageComp from '../../components/PageComp.vue'
import FilePreviewComp from '../../components/FilePreviewComp.vue'
import { Tools } from '../../ts/Tools'
import BackToHome from '../../components/BackToHomeComp.vue'

const del = (info: TbFile) => {
  log.debug('删除的信息：', info)
  ElMessageBox.confirm(`是否删除文件：${info.filename}？`).then(() => {
    ApiService.delete(`/file/manage/${info.fid}`, {}, (data: BaseResult) => {
      requery()
      ElMessage({
        message: data.message,
        icon: data.success ? 'info' : 'error',
      })
    })
  })
}

const uploadVisible = ref(false)
const selecetFile = ref({} as FileInfo)
const fileinfo = ref('')

const upload = () => {
  ApiService.upload('/file/manage', { fileinfo: fileinfo.value }, selecetFile.value.file, (data: BaseDataResult<TbFile>) => {
    if (data.success) {
      ElMessage.success('上传成功')
      reset()
    } else {
      ElMessage.error(data.message)
    }
  })
}

const reset = () => {
  selecetFile.value = {} as FileInfo
  fileinfo.value = ''
}

const browseFile = () => {
  selecetFile.value = {} as FileInfo
  FileTools.openOneFile((info: FileInfo) => {
    log.debug('选中的文件：', info)
    selecetFile.value = info
  })
}

const queryInfo = ref({ contentType: '' } as TbFile)
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref<Array<TbFile>>([])

const previewVisible = ref(false)
const preview = ref({} as TbFile)

const removePreview = () => {
  preview.value = {} as TbFile
}

const showPreview = (info: TbFile) => {
  preview.value = info
  previewVisible.value = true
}

import { BASE_URL } from '../../ts/ApiService'
import { FileInfo } from '../../ts/types/FileInfo'
import { log } from '../../ts/logger'

const copyurl = (info: TbFile) => {
  Tools.copyText(`${BASE_URL}/file/manage/${info.fid}`)
  ElMessage.success('已经复制地址到剪贴板')
}

const types = [
  { type: '', text: '全部文件类型' },
  { type: 'image/', text: '图片文件' },
  { type: 'audio/', text: '音频文件' },
  { type: 'video/', text: '视频文件' },
]

const requery = () => {
  queryInfo.value = { contentType: '' } as TbFile
  page.value = { pageNumber: 1, pageSize: 10 } as PageBean
  query()
}

const query = () => {
  ApiService.get(`/file/manage/${page.value.pageSize}/${page.value.pageNumber}`, queryInfo.value, (data: BaseDataResult<BasePageVO<Array<TbFile>>>) => {
    if (data.success) {
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessage.error(data.message)
  })
}

query()
</script>
<style scoped lang="scss">
.menus {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
  > div {
    margin-left: 0.2rem;
  }
}
</style>
